<template>
	<view class="box1">
		<view class="tabbar">
			<view class="cu-bar tabbar margin-bottom-xl bg-white">
				<view :class="flag == 1 ? 'action text-blue' : 'action text-gray'" @click="fn(1)">
					<view class="cuIcon-home"></view> 首页
				</view>
				<view :class="flag == 3 ? 'action text-blue' : 'action text-gray'" @click="fn(3)">
					<view class="cuIcon-edit"></view> 生词本
				</view>
				<view class="action text-gray add-action" @click="jia">
					<button class="cu-btn cuIcon-add bg-blue shadow"></button>
				</view>
				<view :class="flag == 4 ? 'action text-blue' : 'action text-gray'" @click="fn(4)">
					<view class="cuIcon-discover"></view> 视频
				</view>
				<view :class="flag == 2 ? 'action text-blue' : 'action text-gray'" @click="fn(2)">
					<view class="cuIcon-my">
					</view>
					我的
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar1",
		props: ['flag1'],
		created() {
			uni.hideTabBar()
		},
		data() {
			return {
				flag: this.flag1
			}
		},
		methods: {
			fn(e) {
				if (e == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e == 2) {
					uni.switchTab({
						url: '/pages/my/my'
					})
				} else if (e == 4) {
					uni.switchTab({
						url: '/pages/shiping/shiping'
					})
				} else if (e == 3) {
					uni.switchTab({
						url: '/pages/shenciben/shenciben'
					})
				}

			},
			jia() {
				uni.navigateTo({
					animationType: 'slide-in-bottom',
					url: '/pages/tianjia/tianjia'
				})
			}
		}
	}
</script>

<style scoped>
	.box1 {
		height: 135rpx;
	}

	.tabbar {
		width: 100%;
		position: fixed;
		z-index: 999;
		bottom: -35px;
	}

	>>>.cu-bar {
		min-height: 125rpx;
	}

	.cu-bar.tabbar>>>.action.add-action [class*="cuIcon-"] {
		width: 60px !important;
		line-height: 60px !important;
		height: 60px !important;
		top: -35px !important;
		box-shadow: 0 -5px 3px #f4f4f4;
		;
	}

	.cu-bar.tabbar>>>.action.add-action::after {
		width: 70px;
		height: 70px;
		top: -40px;
		border-radius: 50%;
	}

	.bg-blue {
		background-color: #3F9D83;
	}

	>>>.text-blue {
		color: #3F9D83 !important;
	}
</style>
